<template>
    <div class="home">
        <div class="main-total-box">
            <div class="main-total-item">
                <div>
                    <div class="flex-align-center">
                        <img src="@/assets/images/collection-icon-label.png">
                        <span class="color-999 mar-l-5">总余额</span>
                    </div>
                    <div class="mar-t-5">
                        <count-to class="main-num" :start-val="0" :end-val="totalInfo.point || 0"/>
                        <span class="color-999">元</span>
                    </div>
                </div>
                
            </div>
            <div class="main-total-item">
                <div>
                    <div class="flex-align-center">
                        <img src="@/assets/images/collection-icon-label.png">
                        <span class="color-999 mar-l-5">扣费单价</span>
                    </div>
                    <div class="mar-t-5">
                        <count-to class="main-num" :start-val="0" :end-val="totalInfo.drConsumePerPoint || 0"/>
                        <span class="color-999">元</span>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</template>
<script>
    import { mapGetters } from 'vuex'
    import {detailMenDian} from '@/api/index'

    export default{
        data() {
            return {
                totalInfo: {}
            }
        },
        computed: {
            ...mapGetters(['userInfo']),
        },
        created() {
            this.getMenDianDetail()
        },
        methods: {
            getMenDianDetail(id) {
                detailMenDian({id: this.userInfo.menDianId}).then(res => {
                    this.totalInfo = res.data
                })
            }
        }
    }
</script>
<style scoped lang="scss">
.home{
  .title-box{
    border-bottom: 2px solid #F5F5F5;
    padding-bottom: 12px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    span{
      font-weight: bold;
      position: relative;
      font-size: 20px;
      &:after{
        content: '';
        width: 100%;
        height: 2px;
        background: #33A0FF;
        position: absolute;
        bottom: -14px;
        left: 0;
      }
    }
    .el-icon-arrow-right{
      margin-top: 2px;
    }
  }
  .main-total-box{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 0 -9px;
    .main-total-item{
      padding:0 9px;
      cursor: pointer;
      font-size: 16px;
      margin-bottom: 18px;
      width: 50%;
      >div{
        height: 108px;
        background: linear-gradient( 180deg, #F5F9FF 0%, #FFFFFF 100%);
        border: 2px solid #FFFFFF;
        padding: 24px;
        .main-num{
          font-size: 32px;
          font-weight: bold;
          position: relative;
          top: 2px;
        }
      }
    }
    >img{
      cursor: pointer;
      margin-left: 9px;
      
    }
  }
  .left-table-box,.today-box{
    background-color: #FFFFFF;
    padding: 24px;
    margin-top: 18px;
    .el-table{
      ::v-deep .el-table__header-wrapper tr{
        background: #F0F4FA;
      }
      ::v-deep .el-table__header-wrapper th, ::v-deep .el-table__fixed-header-wrapper th{
        background-color: transparent;
        color: #4E5766;
        border-bottom: 0;
      }
    }
  }
  .month-collection-box{
    background-color: #FFFFFF;
    padding: 24px;
    .month-echarts{
      width: 100%;
      height: 230px;
    }
  }
}
@media only screen and (max-width: 800px){
  .home .main-total-box .main-total-item{
    width: 50%;
  }
}
@media only screen and (max-width: 500px){
  .home .main-total-box .main-total-item{
    width: 100%;
  }
}
</style>